import React from 'react';
import { Link } from 'react-router-dom';
import { Select, DatePicker } from 'antd';
import axios from 'axios';
import { apiPrefix } from '../../../shared/api';

import './index.less';


const { Option } = Select;
export default class StateBook extends React.PureComponent {
  constructor() {
    super();
    this.state = {
      CertificateDeadline: [],
      CertificateTypes: [],
      queryCertificate: {},
      count: '',
      countPerson: '',
    };
  }

  componentDidMount() {
    const api = `${apiPrefix}api/v1/certificate/exp`;
    const api2 = `${apiPrefix}api/v1/certificate/types`;
    axios.get(api)
      .then((response) => {
        const resData = response.data.data;
        const resDataData = [];
        for (const key in resData) {
          resDataData.push(resData[key]);
        }
        this.setState({ CertificateDeadline: resDataData, count: response.data.count, countPerson: response.data.count_person });
      });
    axios.get(api2)
      .then((response) => {
        this.setState({ CertificateTypes: response.data.data });
      });
  }
  handlOnChange=(value, key) => {
    const { queryCertificate } = this.state;
    queryCertificate[key] = value;
    this.setState({ queryCertificate: { ...this.state.queryCertificate } });
    console.log(queryCertificate);
  }
  query=() => {
    const { CertificateDeadline } = this.state;
    axios.request({
      url: `${apiPrefix}api/v1/certificate/exp`,
      method: 'get',
      params: this.state.queryCertificate,
    })
      .then((response) => {
        const responses = response.data.data;
        const CertificateDeadlineQuery = [];
        for (const index in responses) {
          CertificateDeadlineQuery.push(responses[index]);
        }
        this.setState({ CertificateDeadline: CertificateDeadlineQuery });
      });
  };
  clearInput=() => {
    this.setState({ queryCertificate: {} });
    // console.log(this.state.queryCertificate);
  }
  render() {
    const date = new Date();
    const Y = `${date.getFullYear()}-`;
    const M = `${date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1}-`;
    const D = `${date.getDate()} `;
    const today = Y + M + D;
    const { CertificateTypes, CertificateDeadline, count, countPerson, queryCertificate } = this.state;
    return (
      <div className="dueBook">
        <div>
          <h3>证书到期查询</h3>
          <div>
            <div className="dueBookInput">
              <div className="absolute1">
                <span>截止时间</span>
                <DatePicker
                  placeholder="选择时间"
                  onChange={(moment, dataString) => this.handlOnChange(dataString, 'exp_date')}
                />
              </div>
              <div className="absolute2">
                <span>姓名</span>
                <input
                  value={queryCertificate.user_name || ''}
                  onChange={e => this.handlOnChange(e.target.value, 'user_name')}
                  type="text"
                  placeholder="请输入姓名"
                />
              </div>
              <div className="absolute3">
                <span>员工编号</span>
                <input
                  value={queryCertificate.user_erp_id || ''}
                  onChange={e => this.handlOnChange(e.target.value, 'user_erp_id')}
                  type="number"
                  placeholder="请输入员工编号"
                />
              </div>
              <div className="absolute4">
                <span>身份证号</span>
                <input
                  value={queryCertificate.user_idcard || ''}
                  onChange={e => this.handlOnChange(e.target.value, 'user_idcard')}
                  type="number"
                  placeholder="请输入身份证号"
                />
              </div>
              <div className="absolute5">
                <span>证书类型</span>
                <Select
                  value={queryCertificate.type_id || ''}
                  showSearch
                  style={{ width: 350, marginLeft: 20 }}
                  placeholder="选择证书"
                  onChange={value => this.handlOnChange(value, 'type_id')}
                  optionFilterProp="children"
                  filterOption={(input, option) =>
                option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
                >
                  {
                    CertificateTypes.map((value, index) => (
                      <Option value={value.id} key={index}>{value.fullname}</Option>
                  ))
              }
                </Select>
              </div>
              <div className="absolute6">
                <span>时间段</span>
                <DatePicker
                  placeholder="开始时间"
                  onChange={(moment, dataString) => this.handlOnChange(dataString, 'date_start')}
                />
                <DatePicker
                  placeholder="结束时间"
                  onChange={(moment, dataString) => this.handlOnChange(dataString, 'date_end')}
                />
              </div>
              <div className="absolute7">
                <button className="queryButton" onClick={this.query}>查询</button>
                <button className="clearButton" onClick={this.clearInput}>清空查询条件</button>
                <button className="excelButton">导出Excel</button>
              </div>
            </div>
          </div>
        </div>
        <div className="dueBookTable">
          <div className="dueBookWarn">
            <h3>{`截止${today}到期的证书`}</h3>
            <div className="dueBookWarnSpan">
              <span>{`到期人员数：${countPerson}`}</span>
              <span>{`到期证书数：${count}`}</span>
            </div>
          </div>
          <table>
            <thead>
              <tr>
                <th className="w50">序号</th>
                <th className="w120">姓名</th>
                <th className="w50">员工编号</th>
                <th className="w120">身份证号</th>
                <th className="w120">证书名称</th>
                <th className="w120">首次取证时间</th>
                <th className="w120">取证时间</th>
                <th className="w120">到期时间</th>
                <th className="w120">状态</th>
                {/* <th className="w120">
                  <button className="add-button">
                    <Link to="/Contract/ContractDeadline/ContractManageForm">登记证书</Link>
                  </button>
                </th> */}
              </tr>
            </thead>
            <tbody>
              {
                CertificateDeadline.map((value, index) =>
                  value.certificates.map((cer, cIndex) =>
                    (
                      <tr key={index + cIndex}>
                        {(cIndex === 0) && <td rowSpan={value.certificates.length}>{index + 1}</td>}
                        {(cIndex === 0) && <td rowSpan={value.certificates.length}>{value.user.name}</td>}
                        {(cIndex === 0) && <td rowSpan={value.certificates.length} />}
                        {(cIndex === 0) && <td rowSpan={value.certificates.length}>{value.user.idcard}</td>}
                        <td>{cer.fullname}</td>
                        <td>{cer.first_mfd_date}</td>
                        <td>{cer.mfd_date}</td>
                        <td className={cer.show_state && 'expire-data'}>{cer.exp_date}</td>
                        <td><span className="expire">{cer.show_state && '已过期'}</span></td>
                      </tr>
                    )))
              }
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}
